<template>
  <div id="myclassmate">
    <div class="main">
      <Row>
        <!-- 大标题 -->
        <Col span="24" class="maxTitle">{{info.maxTitle}}</Col>
      </Row>
      <div v-for="(myclassmate,index) in info.myclassmates" :key="index" class="info">
        <Row>
          <!-- 上引号 -->
          <Col span="24">
            <img src="./image/myclassmate/light-icon1.svg" />
          </Col>
        </Row>
        <Row>
          <Col span="24" class="avator">
            <Row>
              <Col span="5">
              <!-- 头像 -->
                <Avatar icon="ios-person" :src="myclassmate.avator" size="54" />
              </Col>
              <Col span="19">
              <!-- 公司名称 -->
                <p class="inc">{{myclassmate.inc}}</p>
                <!-- 助教和报名时间 -->
                <p>{{myclassmate.name|nameFormat}} | 助教&nbsp;&nbsp;&nbsp;&nbsp;报名时间：{{myclassmate.date}}</p>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span="24" class="message">
          <!-- 报名原因标题 -->
            <span class="yuanyinTitle">报名此课程原因&nbsp;：</span>
              <!-- 报名原因内容 -->
            <span>{{myclassmate.signup}}</span>
          </Col>
        </Row>
        <Row>
          <Col span="24" class="message">
          <!-- 选择路飞标题 -->
            <span class="yuanyinTitle">为何选路飞&nbsp;：</span>
            <!-- 选择路飞内容 -->
            <span>{{myclassmate.selected}}</span>
          </Col>
        </Row>
        <Row>
          <Col span="24" class="message">
          <!-- 期待标题 -->
            <span class="yuanyinTitle">你的期待&nbsp;:</span>
            <!-- 期待内容 -->
            <span>{{myclassmate.forward}}</span>
          </Col>
        </Row>
        <Row>
          <!-- 右边引号 -->
          <Col span="24" class="yinhao_right">
            <img src="./image/myclassmate/light-icon2.svg" />
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
//导入iview-ui组件
import { Row, Col, Avatar } from "view-design";
//导入vue
import Vue from "vue";
//vue过滤器 做文字省略
Vue.filter("nameFormat", name => {
  return name.substr(0, 1) + "**";
});

export default {
  name: "myclassmate",
  //组件注册
  components: {
    Row,
    Col,
    Avatar
  },
  //传入属性
  props:['info'],
  data() {
    return {
      
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部UI样式修改 */
.main {
  color: #2a2a2a;
  font-size: 12px;
  text-align: left;
  margin: 0 15px 10px;
}
.maxTitle {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.info {
  margin: 20px 0;
}
.avator {
  padding-left: 20px;
  padding-bottom: 20px;
}
.inc {
  padding: 10px 0;
  font-size: 14px;
}
.yinhao_right {
  text-align: right;
}
.message {
  padding: 5px 20px;
}
.message span {
  line-height: 18px;
}
.yuanyinTitle {
  color: #888484;
}
</style>